<template>
    <div>
        <Carousel></Carousel>
        <Search></Search>
        <!-- 底部展示医院结构 -->
        <!-- 距离gutter -->
        <el-row gutter="20">
            <el-col :span="20">
                <!-- 等级子组件 -->
                <Level @getLevel="getLevel"></Level>
                <Region @getRegion="getRegion"></Region>
                <div class="hospital" v-if="hasHospitalArr.length > 0">
                    <Card class="item" v-for="(item, index) in hasHospitalArr" :key="index" :hospitalInfo="item"></Card>
                    <!-- 分页器 -->
                </div>
                <el-empty v-else description="没有更多了" />

                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                    :background="true" layout=" sizes, prev, pager, next, jumper,total" :total="total"
                    @current-change="CurrentChange" @size-change="CurrentChange" />
            </el-col>
            <el-col :span="4">
                <Tip></Tip>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
//引入首页轮播图组件
//@ts-ignore
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from './level/index.vue'
import Region from './region/index.vue'
import Card from './card/index.vue'
import Tip from './tip/index.vue'
//ts
import type { content } from '@/api/home/type'
import { HospitalResponseData } from '@/api/home/type'
//引入分页器需要的数据
import { ref, onMounted } from 'vue'
//引入请求方法
import { reqHospital } from '@/api/home/index'
//分页器页码
let pageNo = ref<number>(1)
//一页展示几条数据
let pageSize = ref<number>(10)
//存储医院的数据
let hasHospitalArr = ref<content>([])
//存取医院总个数
let total = ref<number>(0)
//存储医院等级
let HosType = ref<string>('')
//存储医院地区
let districtCode = ref<string>('')
//挂载时发送请求
onMounted(() => {
    getHospitalInfo()
})

//获取已有的医院的数据
const getHospitalInfo = async () => {
  //获取医院的数据:默认获取第一页、一页十个医院的数据
  let result: HospitalResponseData = await reqHospital(
    pageNo.value,
    pageSize.value,
    HosType.value,
    districtCode.value
  );
  if (result.code == 200) {
    //存储已有的医院的数据
    hasHospitalArr.value = result.data.content;
    //存储医院的总个数
    total.value = result.data.totalElements;
  }
};

//分页器页码发生变化时
const CurrentChange = () => {
    getHospitalInfo()
}
//子组件给父组件传消息
const getLevel = (value: string) => {
    // console.log('被触发了');
    HosType.value = value;
    getHospitalInfo();
}
const getRegion = (value: string) => {
    districtCode.value = value;
    getHospitalInfo();
}
</script>
<script lang="ts">
export default {
    name: 'home'
}
</script>

<style lang="scss" scoped>
.hospital {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 48%;
        margin: 10px 0px
    }
}
</style>